<template>
  <div class="add">
    <div class="add-box">

      <div class="list clearfix">
        <div class="fl">联系人</div>
        <div class="fr"><input type="text" class="txt" placeholder="名字" v-model="name"></div>
      </div>
      <div class="list clearfix">
        <div class="fl">手机号码</div>
        <div class="fr"><input type="text" class="txt" placeholder="11位手机号码" v-model="phone"></div>
      </div>
      <div class="list clearfix">
        <div class="fl">选择地区</div>
        <div class="fr">
          <div class="city-picker-span-box">
            <input id="city-picker3" class="price form-control" readonly type="text" placeholder="填写详细地址" data-toggle="city-picker">
          </div>
        </div>
      </div>
      <div class="list clearfix">
        <textarea name="" id="" placeholder="详细地址" class="detail" v-model="address"></textarea>
      </div>

      <div class="next-btn">
        <mt-button type="danger" size="large" v-if="!editBtn" v-on:click="addAddressFn">确认</mt-button>
        <mt-button type="danger" size="large" v-if="editBtn" v-on:click="editAddressFn">修改</mt-button>
      </div>

    </div>
    <div class="error-msg">{{errorMsg}}</div>
  </div>
</template>

<script type="text/javascript" src="./static/js/city-picker.data.js"></script>
<script type="text/javascript" src="./static/js/city-picker.js"></script>

<script>

// var $citypicker3 = $('#city-picker3');
import { Toast } from 'mint-ui';

export default {
  name: 'AddAddress',
  data () {
    return {
      phone: '',
      name: '',
      address:'',
      province:'',
      city:'',
      district:'',
      default:0,
      errorMsg:'',
      editBtn:false

    }
  },
  mounted:function(){

    if(this.$route.query.addressId){

      this.editBtn = true;
      var _this = this;

      this.getAddress(function(){
//        alert(1)
        console.log(_this.province)
        console.log(_this.city)
        console.log(_this.district)

          $('[data-toggle="city-picker"]').citypicker({province: _this.province, city: _this.city, district: _this.district});
        setTimeout(function(){
          $('.city-picker-span').css({'width':'9rem','borderBottom': '0','background': 'none'});
          $('.city-picker-dropdown').css('top','3rem');
        },100)

      });

    }
    else{
      $('[data-toggle="city-picker"]').citypicker();

      setTimeout(function(){
        $('.city-picker-span').css({'width':'9rem','borderBottom': '0','background': 'none'});
        $('.city-picker-dropdown').css('top','3rem');

      },100)
    }

    //$('[data-toggle="city-picker"]').citypicker();
  },
  methods:{
    addAddressFn:function(){
      var province_id = $('.city-picker-span-box .select-item').eq(0).attr('data-code') || '';
      var city_id = $('.city-picker-span-box .select-item').eq(1).attr('data-code') || '';
      var district_id = $('.city-picker-span-box .select-item').eq(2).attr('data-code') || '';

      if(this.name == ''){
        this.errorMsg = '名字不能为空';
        return;
      }

      if(this.phone == ''){
        this.errorMsg = '手机号不能为空';
        return;
      }

      if(province_id == '' || city_id=='' || district_id==''){
        this.errorMsg = '选择地区有误';
        return;
      }
      if(this.address == ''){

        this.errorMsg = '详细地址不能为空';
        return;

      }

      if(!utilities.isMobile(this.phone)) {
        this.errorMsg = '请输入正确的手机号'
        return;
      }
      else{
        this.errorMsg = '';
      }



      var _this = this;

      var addAddressData = {};
      addAddressData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      addAddressData.phone = this.phone;
      addAddressData.name = this.name;
      addAddressData.address = this.address;
      addAddressData.province_id = province_id;
      addAddressData.city_id = city_id;
      addAddressData.district_id = district_id;
      addAddressData.default = this.default;


      $.ajax({
        type:'post',
        url: RouteMap.addaddress,
        data:addAddressData,
        success:function(res){
          if(res.code == 200){
//            alert(1)

//            if(_this.$route.query.redirect != '' && _this.$route.query.redirect != undefined){
//              _this.$router.push({path:''+_this.$route.query.redirect});
//            }
//            else{
//              _this.$router.push({path:'/me/people'});
//            }

            window.history.go(-1)

          }
          else{
            Toast(res.msg)
          }
        }
      })


    },
    editAddressFn:function(){
      var province_id = $('.city-picker-span-box .select-item').eq(0).attr('data-code') || '15';
      var city_id = $('.city-picker-span-box .select-item').eq(1).attr('data-code') || '11';
      var district_id = $('.city-picker-span-box .select-item').eq(2).attr('data-code') || '114';

      if(this.name == ''){
        this.errorMsg = '名字不能为空';
        return;
      }

      if(this.phone == ''){
        this.errorMsg = '手机号不能为空';
        return;
      }

      if(province_id == '' || city_id=='' || district_id==''){
        this.errorMsg = '选择地区有误';
        return;
      }
      if(this.address == ''){

        this.errorMsg = '详细地址不能为空';
        return;

      }

      if(!utilities.isMobile(this.phone)) {
        this.errorMsg = '请输入正确的手机号'
        return;
      }
      else{
        this.errorMsg = '';
      }

      var _this = this;

      var addAddressData = {};
      addAddressData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      addAddressData.phone = this.phone;
      addAddressData.name = this.name;
      addAddressData.address = this.address;
      addAddressData.province_id = province_id;
      addAddressData.city_id = city_id;
      addAddressData.district_id = district_id;
      addAddressData.default = this.default;
      addAddressData.address_id = this.$route.query.addressId || '';

      $.ajax({
        type:'post',
        url: RouteMap.editaddress,
        data:addAddressData,
        success:function(res){
          if(res.code == 200){
            window.history.go(-1);
//            alert(1)
//
//            if(_this.$route.query.redirect != '' && _this.$route.query.redirect != undefined){
////              _this.$router.push({path:''+_this.$route.query.redirect});
//              window.history.go(-1);
//            }
//            else{
//              _this.$router.push({path:'/me/people'});
//            }

          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
    getAddress(cb){
      var getAddressData = {};
      getAddressData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      var _this = this;
      $.ajax({
        type:'post',
        url: RouteMap.getAddress,
        data:getAddressData,
        success:function(res){
          if(res.code == 200){

            var myaddress = res.data.addresses[_this.$route.query.addressId];
            _this.phone = myaddress.telephone;
            _this.name = myaddress.name;
            _this.address = myaddress.address;
            _this.province = myaddress.provice_name;
            _this.city = myaddress.city_name;
            _this.district = myaddress.district_name;
            _this.province_id = myaddress.province_id;
            _this.city_id = myaddress.city_id;
            _this.district_id = myaddress.district_id;
            _this.default = myaddress.default;

            cb();

          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .city-picker-span-box{

    display: inline-block;
    width: 9rem;
    height: 1.5rem;
    overflow: hidden;
    vertical-align: middle;
  }
  .add-box{
    padding: 1rem;
    font-size: 0.6rem;
  }
  .add-box .fl{
    height: 30px;
    line-height: 30px;
    width: 3rem;
  }
  .add-box .txt{
    text-align: right;
    font-size: 0.6rem;
    width: 10rem;
  }
  .list{
    border-bottom: 1px solid #c3c3c3;
    padding: 0.6rem 0;
  }
  .detail{
    font-size: .6rem;
    width: 13rem;
    height: 3rem;
  }
  .next-btn{
    padding: 0;
  }


</style>
